<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
		<title></title>

		<link rel="stylesheet" type="text/css" href="css/base.min.css" />
		<style>
			html,
			body {
				height: 100%;
				width: 100%;
				background: #fcfcfc;
			}
			
			.header {
				padding: 0;
			}
			
			.header p {
				margin: 0;
			}
			
			#dairyList {
				margin: 0;
			}
			
			#footer {
				position: fixed;
				bottom: 0px;
				right: 10px;
				z-index: 99999 !important;
			}
			
			#footer p {
				/*text-align: center;*/
				color: #636363;
			}
			
			#footer .row p {
				text-align: center;
			}
		</style>
	</head>

	<body>

		<div id="dairyList" class="tile-wrap">

		</div>
		<footer id="footer">
			<a href="#dairyUpdate" data-toggle="modal" class="btn fbtn fbtn-brand waves-attach waves-circle waves-light">
				<span class="icon">add</span>
			</a>
		</footer>
		<div aria-hidden="true" class="modal fade" id="dairyUpdate" role="dialog" tabindex="-1">
			<div class="modal-dialog modal-xs">
				<div class="modal-content" style="text-align: center;">
					<div class="modal-heading">
						<h2 class="modal-title" style="text-align: center;margin: 0;">日记</h2></div>
					<div class="modal-inner" style="padding: 0;">
						<input type="hidden" id="dairyId" />
						<div class="form-group form-group-label">
							<label class="floating-label" for="title">标题</label><input class="form-control" id="title" type="text">
						</div>
						<div class="form-group form-group-label">
							<label class="floating-label" for="content">内容</label><textarea class="form-control" id="content" rows="10"></textarea>
						</div>
					</div>
					<div class="modal-footer">
						<button style="font-size:17px;" onclick="update();" class="btn  btn-flat  btn-brand waves-attach waves-effect waves-button waves-light" data-dismiss="modal">确认</button>
						<a style="font-size:17px;" class="btn btn-flat btn-brand-accent waves-attach waves-button waves-effect" data-dismiss="modal">关闭</a>
					</div>

				</div>
			</div>
		</div>
	</body>

	<script src="js/appcan/appcan.js"></script>
	<script src="js/appcan/appcan.control.js"></script>
	<script type="text/javascript" src="js/lib/jquery-2.2.1.min.js"></script>
	<script src="js/lib/base.min.js"></script>

	<script>
		var token = appcan.locStorage.getVal('token');
		var token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEsImlzcyI6Imh0dHA6XC9cL2x4bC41MjA6ODA4MFwvTWF0Y2hcL2JhYnlCdWRkeVwvcHVibGljXC9hcGlcL2F1dGhcL2xvZ2luIiwiaWF0IjoxNDU4NTYyMzA5LCJleHAiOjE0NjIxNjIzMDksIm5iZiI6MTQ1ODU2MjMwOSwianRpIjoiZjdlYmFmNjc4Mzc0YmM4Njc3ZTJiZDMyYTY0NzMwOGMifQ.4uAwv77rM17MlJtd4XCovFyj2Wm5toIxb7EJsM3gozs';
		appcan.ready(function() {
			//从云端获取列表
			dairyList();
		});
		//				dairyList();
		function dairyList() {
			$('#dairyList').text('');
			var url = 'http://192.168.155.1:8080/Match/babyBuddy/public/api/dairy';
			$.ajax({
				url: url,
				type: 'get',
				headers: {
					'Authorization': ' Bearer ' + token
				},
				success: function(d) {
					for (var key in d.data) {
						$str = '<div class="tile"><div class="tile-action tile-action-show"><ul class="margin-no nav nav-list pull-right"><li><a onclick="dairyUpdate(this)" name="' + d.data[key].id + '" class="text-black-sec waves-attach waves-effect"><span class="icon">edit</span></a></li><li><a onclick="dairyDelete(this);" class="text-black-sec waves-attach waves-effect" name="' + d.data[key].id + '"><img class="icon"src="img/iconfont-iconfontshanchu.png"></a></li></ul></div><div class="tile-inner"><span class="text-overflow">' + d.data[key].title + '</span></div></div>';
						$('#dairyList').append($str);
					}
				},
				error: function(e) {
					alert("错误！");
					console.log(e);
				}
			});
		}

		function dairyDelete(o) {
			var id = $(o).attr('name');
			var url = 'http://192.168.155.1:8080/Match/babyBuddy/public/api/dairy/delete/' + id;
			$.ajax({
				url: url,
				type: 'POST',
				headers: {
					'Authorization': 'Bearer ' + token
				},
				success: function(d) {
					alert(d.message);
					dairyList();
				},
				error: function(e) {
					alert(e);
					console.log(e);
				}
			});
		}

		function openWrite() {
			//			alert(123);
			appcan.frame.open({
				id: 'dairyWrite',
				url: 'dairyWrite.html',
				top: 0,
				left: 0
			});
		}

		function dairyUpdate(o) {
			var id = $(o).attr('name');
			var url = 'http://192.168.155.1:8080/Match/babyBuddy/public/api/dairy/' + id;
			$.ajax({
				url: url,
				type: 'get',
				headers: {
					'Authorization': ' Bearer ' + token
				},
				success: function(d) {
					if (d.code == '200') {
						$('#title').val(d.data.title);
						$('#content').val(d.data.content);
						$("#dairyId").val(d.data.id);
						$('#dairyUpdate').modal('show');
					}
				},
				error: function(e) {
					alert("错误！");
				}
			});
		}

		function update() {
			var url = "http://192.168.155.1:8080/Match/babyBuddy/public/api/dairy";
			var data = {
				'title': $('#title').val(),
				'content': $('#content').val()
			}
			if ($('#dairyId').val() != '') {
				data.id = $('#dairyId').val();
				var url = 'http://192.168.155.1:8080/Match/babyBuddy/public/api/dairy/update';
			}
			$.ajax({
				url: url,
				type: 'POST',
				data: data,
				headers: {
					'Authorization': 'Bearer ' + token
				},
				success: function(d) {
					alert(d.message);
					dairyList();
				},
				error: function(e) {
					alert(e);
					console.log(e);
				}
			});
		}
	</script>

</html>